.trm-timeline {
    position: relative;
    padding : 0 10px;

    &::before {
        content   : '';
        position  : absolute;
        top       : 20px;
        left      : 10px;
        height    : calc(100% - 20px);
        width     : 4px;
        background: @theme-bg-color;
    }

    .trm-timeline-item {
        position: relative;

        .trm-timeline-mark-light {
            background   : #c0ca33;
            position     : absolute;
            top          : 15px;
            left         : -11px;
            width        : 26px;
            height       : 26px;
            opacity      : 0;
            border-radius: 50%;
            transition   : .4s ease-in-out;
        }

        .trm-timeline-mark {
            position     : absolute;
            top          : 18px;
            left         : -8px;
            width        : 20px;
            height       : 20px;
            border-radius: 50%;
            border       : solid 3px #afb42b;
            background   : @theme-bg-color;
        }

        &:hover {
            .trm-timeline-mark-light {
                animation: puls 1s infinite;
            }
        }
    }

    .trm-timeline-content {
        border-radius: 10px;
        position     : relative;
        margin-left  : 45px;
        background   : @theme-bg-color;
        padding      : 40px;
        margin-bottom: 40px;
        box-shadow   : @box-shadow;

        &:after {
            height                 : 10px;
            width                  : 10px;
            background-color       : @theme-bg-color;
            transform              : rotate(-135deg);
            content                : '';
            position               : absolute;
            top                    : 23px;
            left                   : -5px;
            border-top-right-radius: 50%;
        }

        .trm-card-header {
            width          : 100%;
            display        : flex;
            align-items    : baseline;
            justify-content: space-between;
            flex-wrap      : wrap;

            .trm-right-side {
                margin-bottom: 15px;

                .trm-date {
                    color        : @theme-color;
                    margin-left  : auto;
                    background   : @theme-bg2-color;
                    padding      : 5px 15px;
                    border-radius: 15px;
                    font-size    : 10px;
                }
            }
        }
    }
}